<template>
  <div class="payPage">
    <el-row>
      <el-col :span="6">
        <el-input placeholder="请输入域名" v-model="domainText" class="input-with-select">
          <el-select v-model="merchantSelect.id" slot="prepend" placeholder="请选择">
            <el-option
              v-for="(item,index) in merchantAllList"
              :key="index"
              :label="item.merchant"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getpayList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="8" :offset="9" align="right">
        <el-button type="primary" icon="el-icon-plus" @click="payEdit('', 'add')">新增</el-button>
      </el-col>
    </el-row>

    <el-table class="tableList" :data="payList" stripe height="85%">
      <el-table-column type="index" align="center" width="50"></el-table-column>
      <el-table-column prop="id" label="ID" align="center" width="50"></el-table-column>
      <el-table-column prop="domain" label="应用域名" align="center"></el-table-column>
      <el-table-column prop="merchant_id" label="服务商" align="center" width="80"></el-table-column>
      <el-table-column prop="addtime" label="数据" align="center">
        <template slot-scope="scope">
          <el-tag>网关URL: {{scope.row.gateway_url}}</el-tag>
          <el-tag>商户号: {{scope.row.merchant_num}}</el-tag>
          <el-tag>终端号: {{scope.row.ter_num}}</el-tag>
          <el-tag>秘钥: {{scope.row.sec_key}}</el-tag>
          <el-tag>公钥: {{scope.row.pub_key}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80">
        <template slot-scope="scope">
          <el-button size="mini" @click="payEdit(scope.row, 'edit')">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="pageChange"
    ></el-pagination>

    <!-- 新增，编辑弹框 -->
    <el-dialog title="支付管理" :visible.sync="isShowModel">
      <div class="dialog-body">
        <el-row>
          <el-col :span="3">
            <label>服务商</label>
          </el-col>
          <el-col :span="20">
            <el-select v-model="paymerchantData.id" placeholder="请选择">
              <el-option
                v-for="(item,index) in merchantList"
                :key="index"
                :label="item.merchant"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <label>应用域名</label>
          </el-col>
          <el-col :span="20">
            <el-input placeholder="应用域名" v-model="payData.domain"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <label>网关URL</label>
          </el-col>
          <el-col :span="20">
            <el-input placeholder="网关URL" v-model="payData.gateway_url"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <label>商户号</label>
          </el-col>
          <el-col :span="20">
            <el-input placeholder="商户号" v-model="payData.merchant_num"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <label>终端号</label>
          </el-col>
          <el-col :span="20">
            <el-input placeholder="商户号" v-model="payData.ter_num"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <label>秘钥</label>
          </el-col>
          <el-col :span="20">
            <el-input placeholder="秘钥" v-model="payData.sec_key"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <label>公钥</label>
          </el-col>
          <el-col :span="20">
            <el-input placeholder="公钥" v-model="payData.pub_key"></el-input>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="isShowModel = false">取 消</el-button>
        <el-button type="primary" size="small" @click="savePay">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Service from "../../services/main";
export default {
  name: "Pay",
  data() {
    return {
      payList: [],
      payData: {
        domain: ""
      },
      paymerchantData: {
        id: 1
      },
      domainText: "",
      merchantAllList: [],
      merchantList: [],
      merchantSelect: {
        id: "all",
        merchant: "全部"
      },
      total: null,
      pageNo: 1,
      isShowModel: false,
      isAdd: true
    };
  },
  created() {
    this.getpayList();
    this.getMerchantListFn();
  },
  methods: {
    // 获取支付列表
    getpayList() {
      let params = {
        merchant_id: this.merchantSelect.id,
        domain: this.domainText
      };
      Service.getPayInfoList(this, params).then(res => {
        this.payList = res.result.list;
        this.total = res.result.total;
        this.page = res.result.page;
      });
    },

    // 服务商列表
    getMerchantListFn() {
      Service.getMerchantList(this, {}).then(res => {
        this.merchantAllList = [{ id: "all", merchant: "全部" }, ...res.result];
        this.merchantList = res.result;
      });
    },

    // 支付编辑
    payInfoEditFn() {
      Service.payInfoEdit(this, {}).then(res => {
        this.merchantList = res.result.list;
      });
    },

    // 支付删除
    payInfoDelFn() {
      Service.payInfoDel(this, {}).then(res => {
        if (res && res.errorCode == "0") {
          this.$message({ message: "删除成功！", type: "warning" });
        }
      });
    },

    // 支付添加
    payInfoAddFn() {
      Service.payInfoAdd(this, {}).then(res => {
        if (res && res.errorCode == "0") {
          this.merchantList = res.result.list;
        }
      });
    },

    // 编辑,新增
    payEdit(data, type) {
      this.isShowModel = true;
      if (type == "add") {
        this.payData = {};
        this.isAdd = true;
      } else {
        delete data.addtime;
        this.payData = data;
        this.isAdd = false;
      }
    },

    // 保存支付管理
    savePay() {
      this.payData.merchant_id = this.paymerchantData.id;
      let arr = [];
      arr.push(this.payData);
      let params = {
        info: arr
      };
      if (this.isAdd) {
        Service.payInfoAdd(this, params).then(res => {
          if (res && res.errorCode == "0") {
            this.isShowModel = false;
            this.$message({ message: "新增成功！", type: "success" });
            this.getpayList();
          }
        });
      } else {
        Service.payInfoEdit(this, params).then(res => {
          if (res && res.errorCode == "0") {
            this.isShowModel = false;
            this.$message({ message: "修改成功！", type: "success" });
            this.getpayList();
          }
        });
      }
    },

    // 页面切换
    pageChange(val) {
      this.pageNo = val;
      this.getpayList();
    }
  }
};
</script>

<style lang="scss">
.payPage {
  height: 100%;
}
.tableList {
  margin-top: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.dialog-body .el-row {
  margin-top: 20px;
  .el-col-3 {
    line-height: 40px;
    text-align: right;
    padding-right: 20px;
  }
}
.el-tag {
  margin-right: 5px;
}
</style>